<template>
  <div
    class="dialog"
    v-if="show"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="body_wapper">
      <div class="body">
        <i
          class="el-icon-close"
          @click="
            show = false;
            $emit('close');
          "
        ></i>
        <div :style="personnel"></div>
        <!-- <dv-border-box-1> -->
        <rz-height :height="20" />
        <div class="content">
          <div class="list">
            <div class="item" v-for="(item, index) in data" :key="index">
              <div class="title">{{ item.RefName }}</div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>溯源单位数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.dwCount }}</span> 家
                  </div>
                </div>
                <div class="item2">
                  <div>进货总批次数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.pcCount }}</span
                    >次
                  </div>
                </div>
              </div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>进货总重量</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.zlWeight }}</span
                    >KG
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div :style="note1">各单位类型分析</div>
        </div>
        <rz-height :height="20" />

        <el-row :gutter="20">
          <el-col :span="24">
            <div class="content">
              <div id="main13" style="width: 100%; height: 300px"></div>
              <div :style="note1">各月份溯源分析</div>
            </div></el-col
          >
        </el-row>
        <rz-height :height="20" />
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="content">
              <div id="main14" style="width: 100%; height: 440px"></div>

              <div :style="note1">品种分析TOP10</div>
            </div></el-col
          >
          <el-col :span="12">
            <div class="content">
              <div id="main15" style="width: 100%; height: 440px"></div>
              <div :style="note1">产地分析TOP10</div>
            </div>
          </el-col>
        </el-row>

        <!-- </dv-border-box-1> -->
      </div>
      <rz-height />
      <rz-height />
      <rz-height />
      <rz-height />
    </div>
  </div>
</template>
<script>
import { purchasebill } from "@/api/modules/home";
var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {
   
  },
  // 页面加载完成
  mounted() {

     Promise.all([
       this.getList(),
       this.getList1(),
       this.getList2(),
       this.getList3(),
  
    ]).then((res) => {
      this.data=res[0].data
      this.data1=res[1].data
      this.data2=res[2].data
      this.data3=res[3].data
        this.pieChart()
    this.pieChart2()
    this.pieChart3()
    this.loading=false
    })
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      show: true,
      loading: true,
      note1: {
        backgroundImage: "url(" + require("@/assets/images/item13.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
        left: "20px",
        paddingLeft: "10px",
        width: "170px",
        top: "0",
        transform: "translateY(-50%)",
        color: "white",
        fontSize: "14px",
        height: "25px",
        lineHeight: "24px",
      },
      personnel: {
        width: "500px",
        margin: "0 auto",
        backgroundImage: "url(" + require("@/assets/images/item16.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height: "50px",
      },
      data: [],
      data1:[],
      data2:[],
      data3:[],
    };
  },
  // 方法
  methods: {
    async getList() {
     return  await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Purch_Ref_Data",
      });
  
    },
      async getList1() {
     return  await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Purch_Month_Data",
      });
  
    },
      async getList2() {
     return  await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Purch_Item_Data",
      });
  
    },
         async getList3() {
     return  await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Purch_From_Data",
      });
  
    },
    pieChart() {
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["总重量(公斤)", "批次数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: [
        {
            name: "总重量(公斤)",
            type: "value",
          splitLine: {
            show: false, // Do not show grid lines
          },
        },
             {
            //第二种方式
            type: "value",
            name: "批次数",
            position: "right",
            splitLine: {
              show: false, // Do not show grid lines
            },
          },
       ],
        series: [
          {
            name: "总重量(公斤)",
            type: "bar",
            data: this.data1.map(x=>x.zlWeight),

            barWidth: 30,
          },
          {
            name: "批次数",
            type: "line",
            stack: "总量",
            yAxisIndex: 1,
            data:this.data1.map(x=>x.pcCount),
  
          },
        ],
      };
      echarts.init(document.getElementById("main13"), "dark").setOption(option);
    },

    pieChart2() {
      var charts = {
        // 按顺序排列从大到小
        cityList:this.data2.map(x=>x.Name),
        cityData:this.data2.map(x=>x.pcCount),
      };
      var top10CityList = charts.cityList;
      var top10CityData = charts.cityData;
      var color = ["#ff9500", "#02d8f9", "#027fff"];
      var color1 = ["#ffb349", "#70e9fc", "#4aa4ff"];

      let lineY = [];
      let lineT = [];
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i;
        if (x > 1) {
          x = 2;
        }
        var data = {
          name: charts.cityList[i],
          color: color[x],
          value: top10CityData[i],
          barGap: "-100%",
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[x],
                  },
                  {
                    offset: 1,
                    color: color1[x],
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
        };
        var data1 = {
          value: top10CityData[0],
          itemStyle: {
            color: "transparent",
            barBorderRadius: 10,
          },
        };
        lineY.push(data);
        lineT.push(data1);
      }
      let option = {
        backgroundColor: "transparent",
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            if (p.seriesName === "total") {
              return "";
            }
            return `${p.name}<br/>${p.value}`;
          },
        },
        grid: {
          borderWidth: 0,
          top: "10%",
          left: "5%",
          right: "15%",
          bottom: "3%",
        },
        color: color,
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              inside: false,
            },
            data: top10CityList,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              inside: false,
              verticalAlign: "bottom",
              lineHeight: "40",
              textStyle: {
                color: "#b3ccf8",
                fontSize: "14",
                fontFamily: "PingFangSC-Regular",
              },
              formatter: function (val) {
                return `${val}`;
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: top10CityData.reverse(),
          },
        ],
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "total",
            type: "bar",
            zlevel: 1,
            barGap: "-100%",
            barWidth: "10px",
            data: lineT,
            legendHoverLink: false,
          },
          {
            name: "bar",
            type: "bar",
            zlevel: 2,
            barWidth: "10px",
            data: lineY,
            label: {
              normal: {
                color: "#b3ccf8",
                show: true,
                position: [0, "-21px"],
                textStyle: {
                  fontSize: 16,
                },
                formatter: function (a) {
                  let num = "";
                  let str = "";
                  if (a.dataIndex + 1 < 10) {
                    num = "0" + (a.dataIndex + 1);
                  } else {
                    num = a.dataIndex + 1;
                  }
                  if (a.dataIndex === 0) {
                    str = `{color1|${num}} {color4|${a.name}}`;
                  } else if (a.dataIndex === 1) {
                    str = `{color2|${num}} {color4|${a.name}}`;
                  } else {
                    str = `{color3|${num}} {color4|${a.name}}`;
                  }
                  return str;
                },
                rich: {
                  color1: {
                    color: "#ff9500",
                    fontWeight: 700,
                  },
                  color2: {
                    color: "#02d8f9",
                    fontWeight: 700,
                  },
                  color3: {
                    color: "#027fff",
                    fontWeight: 700,
                  },
                  color4: {
                    color: "#e5eaff",
                  },
                },
              },
            },
          },
        ],
      };
      echarts.init(document.getElementById("main14"), "dark").setOption(option);
    },

    pieChart3() {
      var charts = {
        // 按顺序排列从大到小
         cityList:this.data3.map(x=>x.Name),
        cityData:this.data3.map(x=>x.pcCount),
      };
      var top10CityList = charts.cityList;
      var top10CityData = charts.cityData;
      var color = ["#ff9500", "#02d8f9", "#027fff"];
      var color1 = ["#ffb349", "#70e9fc", "#4aa4ff"];

      let lineY = [];
      let lineT = [];
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i;
        if (x > 1) {
          x = 2;
        }
        var data = {
          name: charts.cityList[i],
          color: color[x],
          value: top10CityData[i],
          barGap: "-100%",
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[x],
                  },
                  {
                    offset: 1,
                    color: color1[x],
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
        };
        var data1 = {
          value: top10CityData[0],
          itemStyle: {
            color: "transparent",
            barBorderRadius: 10,
          },
        };
        lineY.push(data);
        lineT.push(data1);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            if (p.seriesName === "total") {
              return "";
            }
            return `${p.name}<br/>${p.value}`;
          },
        },
        grid: {
          borderWidth: 0,
          top: "10%",
          left: "5%",
          right: "15%",
          bottom: "3%",
        },
        color: color,
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              inside: false,
            },
            data: top10CityList,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              inside: false,
              verticalAlign: "bottom",
              lineHeight: "40",
              textStyle: {
                color: "#b3ccf8",
                fontSize: "14",
                fontFamily: "PingFangSC-Regular",
              },
              formatter: function (val) {
                return `${val}`;
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: top10CityData.reverse(),
          },
        ],
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "total",
            type: "bar",
            zlevel: 1,
            barGap: "-100%",
            barWidth: "10px",
            data: lineT,
            legendHoverLink: false,
          },
          {
            name: "bar",
            type: "bar",
            zlevel: 2,
            barWidth: "10px",
            data: lineY,
            label: {
              normal: {
                color: "#b3ccf8",
                show: true,
                position: [0, "-21px"],
                textStyle: {
                  fontSize: 16,
                },
                formatter: function (a) {
                  let num = "";
                  let str = "";
                  if (a.dataIndex + 1 < 10) {
                    num = "0" + (a.dataIndex + 1);
                  } else {
                    num = a.dataIndex + 1;
                  }
                  if (a.dataIndex === 0) {
                    str = `{color1|${num}} {color4|${a.name}}`;
                  } else if (a.dataIndex === 1) {
                    str = `{color2|${num}} {color4|${a.name}}`;
                  } else {
                    str = `{color3|${num}} {color4|${a.name}}`;
                  }
                  return str;
                },
                rich: {
                  color1: {
                    color: "#ff9500",
                    fontWeight: 700,
                  },
                  color2: {
                    color: "#02d8f9",
                    fontWeight: 700,
                  },
                  color3: {
                    color: "#027fff",
                    fontWeight: 700,
                  },
                  color4: {
                    color: "#e5eaff",
                  },
                },
              },
            },
          },
        ],
      };

      echarts.init(document.getElementById("main15"), "dark").setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: auto;

  .body_wapper {
    height: 100%;
    width: 90%;
    left: 5%;
    top: 5%;
    position: absolute;
    .body {
      background: url(../../../../assets/images/background.jpg);
      padding: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .el-icon-close {
        color: #2760b5;
        font-size: 30px;
        border-radius: 30px;
        cursor: pointer;
        border: 2px solid #2760b5;
        position: absolute;
        right: 10px;
        top: 10px;
      }

      // .dv-border-box-1 {
      //   height: auto;
      .content {
        position: relative;
        padding: 20px 20px;
        background: url(../../../../assets/images/item10.png),
          url(../../../../assets/images/item8.png),
          url(../../../../assets/images/item9.png),
          url(../../../../assets/images/item11.png);
        background-position: top left, top right, bottom right, bottom left;
        background-repeat: no-repeat;
        border: 1px solid #1556ab;
        .list {
          color: #fff;
          display: flex;
          justify-content: space-around;

          .item {
            flex: 1;
            padding: 0 10px;
            // min-width: 150px;
            // flex-basis: 100px;
            // height: 90px;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // div {
            //   text-align: center;
            //   font-weight: 700;
            // }
            // cursor: pointer;
            .item1 {
              display: flex;
            }
            .item2 {
              display: flex;
              flex: 1;
              flex-direction: column;
              text-align: center;
              .text {
                font-size: 16px;
                color: #71f2f4;
              }
            }
            .title {
              font-size: 16px;
              background: url(../../../../assets/images/item12.png);
              text-align: center;
              background-size: 100% 100%;
              padding: 3px 0;
            }
          }
        }
      }
      // }
    }
  }
}
</style>